<template>
    <Panel>
      <div class="row">
          <div class="col-medium-1-2">
              <div class="panel__title">
                  {{ component.name }}
              </div>
          </div>
          <div class="col-medium-1-2">
              <div class="meta-tags">
                  <div class="meta-tags__tag">
                      Most Recent Audit
                  </div>
                  <div class="meta-tags__tag">
                      Audit Type
                  </div>
              </div>
          </div>
      </div>

        <table>
            <thead>
            <tr>
                <th>Type</th>
                <th>ID</th>
                <th>Installed</th>
                <th>Installed By</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{ component.type }}</td>
                <td>{{ component.id }}</td>
                <td>{{ component.installed }}</td>
                <td>{{ component.installed_by }}</td>
            </tr>
            </tbody>
        </table>
    </Panel>
</template>
<script>
    import dateFormat from 'dateformat'
    import Panel from './Panel.vue'

    export default {

        components: {
            Panel
        },

        props: [
            'component'
        ],

        // computed: {
        //     asset_last_audit_date: function() {
        //         return dateFormat(this.system.last_audit_date, 'm/d/yyyy')
        //     },
        //
        //     asset_maintenance_length: function() {
        //         var today = new Date();
        //         var firstDay = new Date(this.asset.first_maintenance_record_date);
        //         var timeDiff = Math.abs(today.getMonth() - firstDay.getMonth() + (12 * (today.getFullYear() - firstDay.getFullYear())));
        //
        //         var data = {};
        //         data.years = Math.floor(timeDiff / 12);
        //         data.months = timeDiff % 12;
        //
        //         return data;
        //     }
        // }

    }
</script>
